<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        /*js引用css时，css得写为内嵌样式*/
        .cssButton16-div {
            font-weight: bold;
            color: pink;
        }
    </style>
</head>
<body>
<button class="button1">隐藏</button>
<button class="button2">显示</button>
<button class="button3">显示/隐藏</button>
<div class="div-p">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>
    <p class="p5">5</p>
    <p class="p5">6</p>
    <div id="test1">
        <p>
            test1_P
        </p>
    </div>
    <div class="test2">
        <p>
            test2_P
        </p>
    </div>
</div>

<input type="text">
<br><br>
<button class="button4">淡入</button>
<button class="button5">淡出</button>
<button class="button6">淡入/淡出</button>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

<div id="flip1">点我拉起面板</div>
<div id="panel1">Hello world!</div>

<div id="flip2">点我拉起/滑下面板</div>
<div id="panel2">Hello world!</div>

<button class="button7">点我左滑动</button>
<div class="button7-div"></div>

<button class="button8">点我滑动放大</button>
<div class="button8-div"></div>

<button class="button9">每点一次相对滑动放大一次</button>
<div class="button9-div"></div>

<br><br><br>

<button class="button10">滑动收放模块</button>
<div class="button10-div"></div>

<button class="button11">同时操作多个元素缩放</button>
<div class="button11-div"></div>

<button class="button12">操作多个元素</button>
<div class="button12-div">1</div>
<br><br><br>

<button id="start">开始</button>
<button id="stop">暂停</button>
<button id="stop2">停止</button>
<button id="stop3">暂停动画，但完成动作</button>
<div class="button-stop">暂停动画</div>
<br><br><br><br>
<p id="test2">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>

<p><a id="runoob" href="www.baidu.com">名称链接: </a><input type="text" id="test3" value="请输入您的用户名"></p>
<button class="button13">显示修改 href 和 title</button>

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn3">尾部添加列表项</button>
<button id="btn4">头部添加列表项</button>
<br>
<p class="charuText">前后插入文本域</p>
<br>
<button id="btn5">之前插入</button>
<button id="btn6">之后插入</button>

<p>这是一个段落。</p>
<p class="italic">
    <i>
        这是另外一个段落。
    </i>
</p>
<button class="button14">
    移除所有 class="italic" 的元素。
</button>
<br><br>
<div class="button15-div">
    清空div元素清空div元素清空div元素
</div>
<br>
<button class="button15">
    清空div元素
</button>
<br><br>

<div id="button16-div">
    这是一些重要的文本!  为元素添加 class
</div>
<br>
<button id="button16">
    为元素添加 css
</button>




</body>
</html>